<script setup lang="ts">
import { reactive } from "vue";
import { apiEdit, apiGetUserInfo } from "@/apis/user";
import userService from "@/services/userService";
import { onLoad } from "@dcloudio/uni-app";
const userInfo = reactive({
  userName: "", //用户昵称
});
onLoad((options: any) => {
  userInfo.userName = options.nickName
});
const cancel = () => {
  uni.navigateBack({ delta: 1 });
};
const submit = async () => {
  // uni.navigateBack({ delta: 1 })
  // uni.navigateBack({ delta: 1 })
  // let res = await apiEdit(userInfo);
  userService.edit(userInfo);
  setTimeout(function() {
  uni.navigateBack({ delta: 1 });
  }, 500);
};
</script>
<template>
  <view>
    <view>
      <uv-input
        :focus="true"
        :maxlength="6"
        cursor="1"
        border="none"
        placeholder=""
        v-model="userInfo.userName"
      ></uv-input>
    </view>
    <view class="btn-group flex-around">
      <button class="btn-cancel" @click="cancel">取消</button>
      <button class="btn-save" @click="submit">保存</button>
    </view>
  </view>
</template>

<style lang="scss">
::v-deep .uv-input {
  background-color: #ffffff;
  height: 80rpx;
}

.btn-group {
  display: flex;
  padding-bottom: 60rpx;
  margin-top: 50rpx;
  font-size: 28rpx;

  .btn-cancel {
    background-color: transparent;
    border: 1px solid #999999;
    box-shadow: none;
    border-radius: 24rpx;
    width: 220rpx;
    height: 80rpx;
  }

  .btn-save {
    background: linear-gradient(
      0deg,
      rgba(191, 1, 3, 1) 0%,
      rgba(255, 84, 2, 1) 99.2%
    );
    box-shadow: none;
    border: 1px solid #999999;
    border-radius: 24rpx;
    border: none;
    width: 220rpx;
    color: #ffffff;
    height: 80rpx;
  }
}
</style>
